<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Object Creation Demo</title>

<link rel="stylesheet" href="mobile.css">
<link href="css/prettify.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/prettify.js"></script>

<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="widget.js"></script>

</head>
<body onload="myonLoad()">
<!-- below required for widgets -->
<!-- <embed type="application/x-systeminfo-widget" hidden="yes"></embed> -->
<h2>Object Creation Demo</h2>
<hr /><p></p>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" class="current">New</a></li>
<li><a href="#">Old</a></li>
<li><a href="#">Methed1</a></li>
<li><a href="#">Mixin</a></li>
<li><a href="#">Method2</a></li>
</ul>
</div>
<div id="content">

<!-- TAB1 ---------------------------------->
<div id="tab1">
<p>
<input type="button" value="Test new syntax" onclick="testNewSyntax();"/><br/> 
</p>
<p>
<code class="prettyprint">
/** new, preferred syntax **/
// properties are directly passed to `create` method
var Animal = Class.create({
  initialize: function(name) {
    this.name = name;
  },
  eat: function(food) {
    return this.name + ' is eating ' + food;
  }
});

// when subclassing, specify the class you want to inherit from
var Cat = Class.create(Animal, {
  // redefine the eat method
  eat: function($super, food) {
    return $super(food) + ' or sth.!';
  }
});

function testNewSyntax()
{
  var cat1 = new Cat('Mimi');
  alert(cat1.eat('fish'));
  // -> "Mini is eating fish or sth!"
}
</code>
</p>
</div>

<!-- TAB2 ---------------------------------->
<div class="tab" id="tab2">
<p>
<input type="button" value="Test old syntax" onclick="testOldSyntax();"/><br/> 
</p>
<p>
<pre>
<code class="prettyprint">
/** obsolete syntax **/

var Animal0 = Class.create();
Animal0.prototype = {
  initialize: function(name) {
    this.name = name;
  },
  eat: function(food) {
    return this.name + ' is eating ' + food;
  }
};

var dog = new Animal0('kitty');
dog.eat('sausage ');
// -> "kitty is eating sausage "

var Cat0 = Class.create();
// inherit from Animal0 class:
Cat0.prototype = Object.extend(new Animal0(), {
  // redefine the eat method
  eat: function(food) {
    return this.name + ' is eating ' + food + ' or sth.!';
  }
});

function testOldSyntax()
{
  var cat1 = new Cat0('Mimi');
  alert(cat1.eat('fish'));
  // -> "Mini is eating fish and sth.!"
}
</code>
</pre>
</p>
</div>


<!-- TAB3 ---------------------------------->
<div class="tab" id="tab3">
<p>
<input type="button" value="Test adding instance method" onclick="testAddMethods();"/><br/> 
</p>
<p>
<pre>
<code class="prettyprint">
/** Add instance method */
function testAddMethods()
{
  var cat1 = new Cat('Mimi');
  
  // every animal should be able to drink!
  Animal.addMethods({
    drink: function() {
      return this.eat('water');
    }
  });

  alert(cat1.drink()); // -> "Mimi is eating water or sth.!"
}

</code>
</pre>
</p>
</div>


<!-- TAB4 ---------------------------------->
<div class="tab" id="tab4">
<p>
<input type="button" value="Test mixin" onclick="testMixin();"/><br/> 
</p>
<p>
<pre>
<code class="prettyprint">
/** mixin */
// define a module
var Tunable = {
  down: function(hp) {
    this.volume -= hp;
    if (this.volume &lt; 0) this.mute();
  },
  mute: function() {
    this.isMute = true;
  }
};

// the first argument isn't a class object, so there is no inheritance ...
// simply mix in all the arguments as methods:
var Tuner = Class.create(Tunable, {
  initialize: function() {
    this.volume = 100;
    this.isMute = false;
  }
});

function testMixin()
{
  var tuner = new Tuner;
  tuner.down(30);
  alert(tuner.volume); //-> 70
}
</code>
</pre>
</p>
</div>


<!-- TAB5 ---------------------------------->
<div class="tab" id="tab5">
<p>
<input type="button" value="Test adding class method" onclick="testClassMethods();"/><br/> 
</p>
<p>
<pre>
<code class="prettyprint">
/** add class methods */
function testClassMethods()
{
  Cat.allEatSth = function(n) {
    var items = [];
    n.times(function(i) {
      items.push(new Cat('Teddy').eat( i + 1));
    });
    return items;
  }

  alert(Cat.allEatSth(3));
  // -> ["Teddy is eating 1 or sth.!", "Teddy is eating 2 or sth.!", "Teddy is eating 3 or sth.!"]
}

</code>
</pre>
</p>
</div>


</body>
</html>
